import React, { useState } from 'react';
import { Button, Tooltip } from 'antd';
import CopyToClipboard from '../CopyToClipboard';

export default function HideOrShowText(props) {
  const [isShow, setIsShow] = useState(false);
  const { needTooltip } = props
  const { needCopy } = props

  return (
    <>
      {isShow ? (
        <>
          {needTooltip ? 
            <Tooltip title={props.text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {props.text}
              </div>
            </Tooltip> :
            <div style={{ width: '200px', wordBreak: 'break-all', whiteSpace: 'normal' }}>{props.text}</div>
          }
        </>
      ) : (
        <>
          <div>*********</div>
        </>
      )}
      <Button type='link' onClick={() => setIsShow(!isShow)}>
        {isShow ? '隐藏' : '显示'}
      </Button>
      {needCopy && <CopyToClipboard text={props.text}></CopyToClipboard>}
    </>
  );
}
